<script setup>

// const handlerclick = () => {
//   console.log('click')
// }
</script>

<template>
  <!-- 头部 -->

  <div class="vab">
    <img src="../assets/image/主页展示.jpg" alt="">
  </div>
  <div class="introduceTitle">齐带山海，膏壤千里</div>
  <img src="../assets/image/homePicture1.jpg" class="homePicture" alt="">
  <p class="introduceText">见证传统经典鲁肴手艺</p>
  <div class="introduceTitle">五味均善，唯中唯和</div>
  <div style="
    display: flex;
    flex-direction: column;
    align-items: center;
  ">
    <ExhibitionComponent title="追求本味" text="原汁原味，口感细腻，色泽诱人，余味悠长" :imgUrl="getImageUrl('assets/image/红烧肉1.jpg')">
    </ExhibitionComponent>
    <ExhibitionComponent title="精湛高超" text="技艺娴熟，经验丰富，匠心独运，巧手妙厨" :imgUrl="getImageUrl('assets/image/糖醋排骨1.jpg')">
    </ExhibitionComponent>
    <ExhibitionComponent title="浓郁回味" text="香气扑鼻，入口鲜美，余味悠长，回味无穷" :imgUrl="getImageUrl('assets/image/葱烧海参1.jpg')">
    </ExhibitionComponent>

  </div>
  <AppFooter></AppFooter>
</template>
<style lang="scss" scoped>
img {
  width: 100%;
}

.introduceTitle {
  letter-spacing: 0.2rem;
  font-size: 1.5rem;
  background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  text-align: center;
  background-position: 100%;
  font-size: 50px;
  height: 150px;
  line-height: 150px;
  margin-bottom: 10px;
  -webkit-animation: shine 3s infinite;
  /*设置动画*/

}

@-webkit-keyframes shine {

  /*创建动画*/
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 100%;
  }
}

.homePicture {
  width: 60%;
  clear: both;
  display: block;
  margin: auto;

}

.introduceText {
  text-align: center;
  color: rgb(75, 75, 75);
  line-height: 50px;
}
</style>